<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-12 14:14:19
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-02 17:19:06
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\Stationsystem\src\pages\index\swiper.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="video" v-if="swiperList.length > 0">
        <adas :list="swiperList"></adas>
        <!-- <videoSwiper :ad-list="list4" :ad-height="348"></videoSwiper> -->
        <!-- <view v-if="swiperList && swiperList.length > 0">
        <swiper class="swiper" circular @change="changCurrent" :autoplay="autoplay" :interval="interval"
            :duration="duration" :current="current">
            <swiper-item v-for="(item, index) in swiperList" :key="index">
                <view class="swiper-item uni-bg-red">
                    <image v-if="item.type === 'image'" class="image" :src="item.src"></image>
                    <video v-if="item.type !== 'image' && current == index" :src="item.src" class="videos" muted loop
                        autoplay :show-loading="true" :id="'video' + index" @ended="onVideoEnded" :controls="false">
                        视频1
                    </video>
                </view>
            </swiper-item>
        </swiper>
    </view> -->
    </view>
</template>

<script>
import adas from '@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue'
// import videoSwiper from '../../components/liuliu-video-swiper/liuliu-video-swiper.vue'
export default {
    name: "swiperComs",
    components: {
        adas,
        // videoSwiper
    },
    data() {
        return {
            list4: [
                // {
                //     url: 'https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                //     isVideo: false,
                // }, {
                //     url: 'https://www.w3school.com.cn/example/html5/mov_bbb.mp4',
                //     isVideo: true,
                // },

                // {
                //     url: 'https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                //     isVideo: false,
                // },
                // {
                //     url: 'https://www.w3schools.com/html/movie.mp4',
                //     isVideo: true,
                // },
            ],
        }
    },
    computed: {
        swiperList() {
            return this.$store.getters.getswiperList;
        }
    },
    // watch: {
    //     swiperList() {
    //         this.init()
    //     }
    // },
    mounted() {
        // this.init()
    },
    methods: {
        // init() {
        //     this.list4 = this.swiperList.map((item) => {
        //         return {
        //             url: item.src,
        //             isVideo: item.type === 'video'
        //         }
        //     })
        // }
    }
}
</script>

<style lang="scss" scoped>
.video {
    width: 100%;
    height: 348rpx;
    position: relative;

    video {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}

.uni-margin-wrap {
    width: 690rpx;
    width: 100%;
}

.swiper {
    height: 348rpx;
}

.swiper-item {
    display: block;
    height: 348rpx;
    text-align: center;

    .image {
        width: 100%;
        height: 100%;
    }

    .videos {
        width: 100%;
        height: 100%;
        pointer-events: auto !important;
    }
}

.swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
}

.uni-common-mt {
    position: relative;
    margin-top: 60rpx;
}

.info {
    position: absolute;
    right: 20rpx;
}

.uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
}
</style>
